import {Canvas, Meta, Story} from '@storybook/blocks'

import * as SideNavStories from './SideNav.stories'

<Meta of={SideNavStories} />

# SideNav

The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../utilities/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) for positioning alongside content.

- You can use a **border** if the parent element doesn't have it already.
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.

<Canvas of={SideNavStories.Default} />

Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.

<Canvas of={SideNavStories.Options} />

The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.

<Canvas of={SideNavStories.SubItem} />

Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.

<Canvas of={SideNavStories.Nested} />
